<!DOCTYPE html>
<html>

<head>
    <style>
        .reWrapper {
            border: 1px solid rebeccapurple;
            position: relative;
            height: 90vh;
            overflow-y: auto;
        }

        .absItem {
            position: absolute;
            left: calc(50% - 150px);
            top: 300px;

            width: 300px;
            height: 100px;
            border: 1px solid peru;
        }

        .absItem i {
            /* font-size: 0;
            border: 16px solid;
            border-top-color: brown;
            border-right-color: darkgreen;
            border-bottom-color: chocolate;
            border-left-color: dodgerblue; */
        }

        .normalItem:first-child {
            height: 400px;
        }

        .normalItem:last-child {
            height: 800px;
        }
    </style>
</head>

<body>
    <div class="reWrapper">
        <div id="normalItem">
            <button>abc</button>
        </div>
        123
        <div class="absItem"><i></i></div>
        <div id="normalItem">
            <button name="btn">abc</button>
        </div>
    </div>
    <script>
        console.log(window.innerWidth, window.outerWidth)
        console.log(document.documentElement.clientWidth, document.documentElement.offsetWidth, document.documentElement.scrollWidth)
        console.log(window.visualViewport.width)
        const divS = document.querySelectorAll('#normalItem')
        console.log(divS, document.getElementsByTagName('*'))

        const div = document.getElementById('normalItem')
        console.log(div.nextElementSibling, div.nextSibling)

    </script>
</body>

</html>